<template>
  <div class="report-wrapper user-conversion">
    <div class="main-hd">
      <h2>{{$t('m.rizhi')}}</h2>
    </div>
    <div class="main-bd">
      <div class="content-wrap">
        <div class="search-con">
        <div class="items">
          <div class="label">{{$t('m.dayTime')}}</div>
          <DatePicker
            type="date"
            :value="selectDate"
            format="yyyy-MM-dd"
            :placeholder="$t('m.dayTime')"
            style="width: 200px;"
            @on-change="handleDatePicker"
          ></DatePicker>
        </div>

        <div class="items">
          <div class="label">{{$t('m.qǐngshūrùzhànghào')}}</div>
          <Input  :placeholder="$t('m.qǐngshūrùzhànghào')" v-model="managerName" ></Input>
        </div>
        <div class="items">
          <div class="label">{{$t('m.selectType')}}</div>
          <Select class="search-col" :placeholder="$t('m.selectType')" v-model="operationType">
            <Option :value="''">ALL</Option>
            <Option v-for="item in types" :value="item">{{ item }}</Option>
          </Select>
        </div>
          <!-- <Button @click="handleReset" style="margin-left: 12px;">{{$t('m.recycle')}}</Button> -->

        </div>
          <div style="clear: both;    margin: 20px 0px;">
        <Button class="parameter_button" style="margin-right:30px;" @click="handleReset">{{$t('m.recycle')}}</Button>
        <Button class="parameter_button" type="primary" @click="getOperationLogs">{{$t('m.cháxún')}}</Button>

          </div>
        <div class="table-con" style="clear: both;">
          <Table border :columns="udColumns" :data="list" :loading="loading"></Table>
          <Page
            :total="total"
            :current.sync="page"
            :page-size-opts="[10, 20, 40, 80, 100]"
            show-total
            show-elevator
            show-sizer
            @on-change="handleCurrentChange"
            @on-page-size-change="handleSizeChange"
            style="float: right; margin: 20px 0;"
          ></Page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'userData',
    data () {
      return {
        sort: false,
        operationType: '',
        managerName: '',
        selectDate: '',
        beginDate: '',
        endDate: '',
        types: [], // platform list
        list: [], // user transfer list
        loading: true,
        udColumns: [
          {
            title: this.$t('m.time'),
            key: 'ctime',
            // render: (h, params) => {
            //   return h('span', this.format(params.row.ctime))
            // }
          },
          { title: this.$t('m.Account'), key: 'operator' },
          { title: this.$t('m.rizhi'), key: 'remark' },
          { title: '类型', key:'type' }
        ],
        page: 1,
        total: 0,
        pageSize: 10
      }
    },
    created () {
      this.billStatisticsDateEvent()
      this.getOperationTypes();
      this.getOperationLogs();

    },
    watch: {
      operationType (newVal, oldVal) {
        this.handleFilter();
      }
    },
    methods: {
         billStatisticsDateEvent () {
      var d = new Date();
      let y = d.getFullYear(); // 年份
      let m = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份
      let r = d.getDate().toString().padStart(2, '0'); // 日子
      let h = d.getHours().toString().padStart(2, '0'); // 小时 
      let mm = d.getMinutes().toString().padStart(2, '0'); // 分钟
      let ss = d.getSeconds().toString().padStart(2, '0'); // 秒
      this.selectDate = `${y}-${m}-${r}`; // es6 字符串模板
      // this.endDate = `${y}-${m}-${r}`;
      // this.billStatisticsTimeDefault = [`${y}-${m}-${r}`, `${y}-${m}-${r}`]
      // this.repayForm.repayDate = this.hksjsaleDate
    },
      // 获取渠道
      format (msec) {
        var d = new Date(msec);
        return [ [ d.getFullYear(), d.getMonth() + 1, d.getDate(), '-'], [ d.getHours(), d.getMinutes(), d.getSeconds(), ':'] ]
        .map(arr => {
          var split = arr.pop();
          return arr.map(val => val > 9 ? val : '0' + val).join(split);
        }).join(' ');
      },
      getOperationTypes () {
        this.$http.get('/api/laocai/sys/operation-log/module')
        .then((response) => {
          JSON.stringify(response.result)
          // if (errcode == 0) {
          response.body.result.splice(0,1)
            this.types = response.body.result
          // }
        })
        .catch(err => {
          console.log(err);
        })
      },
      // 获取用户情况汇总
      getOperationLogs () {
        console.log(this.selectDate,"日志")
        let param = {}, query = '';
        param.cDate = this.selectDate
        param.type = this.operationType
        // console.log(dateEnd + dateBegin)
        param.operator = this.managerName
        param.pageNumber = this.page
        param.pageSize = this.pageSize
        Object.keys(param).forEach((item, index) => {
          if(param[item]){
            query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
          }
        });

        var url3 = `/api/laocai/sys/operation-log/list?${query}`
        this.$http.get(url3).then((response) => {
          if (response.body.result == null){
            this.$Message.info(this.$t('m.wújìlù'))
            this.loading = false;
            this.list = []
            this.total = 0
          }else {
            // if (errcode == 0) {
            //   this.total = data.size;
            JSON.stringify(response)
            // operator 账户名称ctime 时间
            this.list = response.body.result.list
            this.total = response.body.result.size
            // console.log(this.list[1].ctime)
            // }

            // this.total = res.body.result.list
            this.loading = false;
          }

        }, error => {
          console.log(error);
        });
      },
      numberFormatter (value) {
        if (isNaN(value) || value == '' || value == null) return 0;
        return `${(parseFloat(value) * 100).toFixed(2)}`;
      },
      handleDatePicker (val) {
        
          this.selectDate = val
        // debugger
        // if (Array.isArray(val)) {
        //   this.beginDate = val[0];
        //   this.endDate = val[1];
        //   this.selectDate = val;
        // } else {
        //   this.beginDate = '';
        //   this.endDate = '';
        //   this.selectDate = [];
        // }
        // this.handleFilter();
      },
      handleFilter () {
        this.loading = true;
        this.page = 1;
        this.getOperationLogs();
      },
      // 页码改变的回调，返回改变后的页码
      handleCurrentChange (val) {
        this.loading = true;
        this.page = val;
        this.getOperationLogs();
      },
      // 切换每页条数时的回调，返回切换后的每页条数
      handleSizeChange (val) {
        this.pageSize = val;
        this.getOperationLogs();
      },
      handleReset () {
        this.billStatisticsDateEvent()
        // this.selectDate = [];
        // this.beginDate = '';
        // this.endDate = '';
        this.managerName = '';
        this.operationType = '';
        this.handleFilter();
      },
      handleComfirm () {
        this.loading = true;
        if (!this.managerName) {
          return this.$Message.info('账户不能为空');
        }
        this.getOperationLogs();
      }
    }
  }
</script>

<style lang="scss" scoped>
@import "../../static/style.css";
@import "../../static/common.scss";
    .items {
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 20px;
    width: 200px;
    float:left;

    .label {
      overflow: hidden;
      white-space: inherit;
      text-align: right;
      color: #222;
      font-size: 14px;
      margin-right: 10px;
    }
  }
</style>
